
<template>
  <div class="container">
    <!-- 卡片 -->
    <el-card class="box-card">
      <div class="clearfix">
        <el-button
          type="success"
          size="small"
          icon="el-icon-edit"
          @click="$router.push('new')"
          >新增试题</el-button
        >
      </div>
      <!-- 表单 -->
      <el-form ref="query" :model="query" label-width="80px">
        <el-row>
          <!-- 栅格布局，一行四个 -->
          <el-col :span="6">
            <!-- 学科 -->
            <el-form-item label="学科" prop="subjectID">
              <el-select
                style="width: 100%"
                v-model="query.subjectID"
                placeholder="请选择"
                @change="subjectChange"
              >
                <el-option
                  v-for="item in subjects"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 目录 -->
          <el-col :span="6">
            <el-form-item label="二级目录" prop="catalogID">
              <el-select
                style="width: 100%"
                v-model="query.catalogID"
                placeholder="请选择"
                @change="directoryChange"
              >
                <el-option
                  v-for="item in directory"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 标签 -->
          <el-col :span="6">
            <el-form-item label="标签" prop="tags">
              <el-select
                style="width: 100%"
                v-model="query.tags"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in tagsList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.tagName"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 关键字 -->
          <el-col :span="6">
            <el-form-item label="关键字" prop="keyword">
              <el-input
                v-model="query.keyword"
                clearable
                placeholder="根据题干搜索"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- ===================================== -->
        <el-row>
          <!-- 试题类型 -->
          <el-col :span="6">
            <el-form-item label="试题类型" prop="questionType">
              <el-select
                style="width: 100%"
                v-model="query.questionType"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in questionType"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 难度 -->
          <el-col :span="6">
            <el-form-item label="难度" prop="difficulty">
              <el-select
                style="width: 100%"
                v-model="query.difficulty"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in difficulty"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 方向 -->
          <el-col :span="6">
            <el-form-item label="方向" prop="direction">
              <el-select
                style="width: 100%"
                v-model="query.direction"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in direction"
                  :key="item.value"
                  :value="item.value"
                  :label="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 录入人 -->
          <el-col :span="6">
            <el-form-item label="录入人" prop="creatorID">
              <el-select
                style="width: 100%"
                v-model="query.creatorID"
                placeholder="请选择"
                @change="directoryChange"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.username"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- ================================ -->
        <el-row>
          <!-- 题目备注 -->
          <el-col :span="6">
            <el-form-item label="题目备注" prop="remarks">
              <el-input v-model="query.remarks" clearable></el-input>
            </el-form-item>
          </el-col>
          <!-- 企业简称 -->
          <el-col :span="6">
            <el-form-item label="企业简称" prop="shortName">
              <el-input v-model="query.shortName" clearable></el-input>
            </el-form-item>
          </el-col>
          <!-- 城市  -->
          <el-col :span="6">
            <el-form-item class="city-box" label="城市" prop="city">
              <el-select
                class="city-1"
                v-model="query.province"
                placeholder="请选择"
                @change="provinceChange"
              >
                <el-option
                  v-for="(val, index) in province"
                  :key="index"
                  :label="val"
                  :value="val"
                ></el-option>
              </el-select>

              <el-select
                class="city-2"
                v-model="query.city"
                placeholder="请选择"
              >
                <el-option
                  v-for="(val, index) in citys"
                  :key="index"
                  :value="val"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="text-align: right">
            <el-button size="small" @click="clearAll">清除</el-button>
            <el-button size="small" type="primary" @click="getQuestionList">
              搜索</el-button
            >
          </el-col>
        </el-row>
      </el-form>
      <!-- 提示栏 -->
      <el-alert
        :title="`数据一共${counts}条`"
        type="info"
        show-icon
        :closable="false"
        class="el-alert"
      >
      </el-alert>
      <!-- 表格区域 -->
      <template>
        <el-table style="width: 100%" :data="questionList">
          <el-table-column prop="number" label="试题编号" width="180">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="100">
          </el-table-column>
          <el-table-column prop="catalog" label="目录"></el-table-column>
          <el-table-column prop="address" label="题型">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.questionType === '1'">单选</span>
                <span v-else-if="scope.row.questionType === '2'">多选</span>
                <span v-else>简答</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="题干" width="180">
            <template slot-scope="scope">
              <div v-html="scope.row.question"></div>
            </template>
          </el-table-column>
          <el-table-column prop="adddate" label="录入时间" width="160">
            <template slot-scope="scope">
              {{ scope.row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="难度">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.difficulty === '1'">简单</span>
                <span v-else-if="scope.row.difficulty === '2'">一般</span>
                <span v-else>困难</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="aut" label="录入人">
            <template slot-scope="scope">
              {{ scope.row.creator }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <div>
                <el-button
                  trigger="hover"
                  title="预览"
                  plain
                  size="small"
                  type="primary"
                  icon="el-icon-view"
                  circle
                  @click="toDetail(scope.row)"
                ></el-button>
                <el-button
                  trigger="hover"
                  title="修改"
                  plain
                  size="small"
                  type="success"
                  icon="el-icon-edit"
                  @click="toEdit(scope.row.id)"
                  circle
                ></el-button>
                <el-button
                  trigger="hover"
                  title="删除"
                  plain
                  size="small"
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="toDelete(scope.row)"
                ></el-button>
                <el-button
                  trigger="hover"
                  title="收藏"
                  plain
                  size="small"
                  type="warning"
                  icon="el-icon-star-off"
                  @click="toPreview(scope.row)"
                  circle
                ></el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页器 -->
      <el-pagination
        class="el-pagination"
        background
        layout="prev, pager, next ,sizes,jumper"
        :total="counts"
        :page-sizes="[5, 10, 20, 50]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
      <!-- 预览弹层 -->
      <QuestionsPreview
        :dialogVisible.sync="dialogVisible"
        :questionItem="questionItem"
        @close="dialogVisible = false"
      />
    </el-card>
  </div>
</template>

<script>
import QuestionsPreview from '../components/questions-preview.vue'
// 使用as对接口重命名
import { provinces, citys } from '@/api/hmmm/citys'
import { list as subjectList } from '@/api/hmmm/subjects.js'
import { list as directorysList } from '@/api/hmmm/directorys'
import { list as tagsList } from '@/api/hmmm/tags'
import { list as userList } from '@/api/base/users'
import { list as questionList, remove, choiceAdd, preview } from '@/api/hmmm/questions'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
export default {
  name: 'SubjectIndex',
  data () {
    return {
      query: {
        page: 1,
        pagesize: 5,
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 试题类型
        tags: null, // 标签名称
        province: null, // 企业所在地省份
        city: null, // 企业所在城市
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null, // 方向
        creatorID: null, // 录入人
        catalogID: null // 目录
      },
      counts: 0, //  数据总数量
      subjects: [], // 学科列表
      directory: [], //  目录列表
      province: provinces(), // 所有城市
      citys: [], // 城市下地区
      // 表格加:data="questionList" ,单元格加prop数据自动渲染
      questionList: [], // 题库列表
      tagsList: [], // 标签列表
      questionType: questionType, //  试题类型
      difficulty: difficulty, //  难度
      direction: direction, //  方向
      userList: userList, //  录入人
      dialogVisible: false, //  控制弹层
      questionItem: {} // 预览时传入子组件的试题
    }
  },
  components: {
    QuestionsPreview
  },
  created () {
    this.getSubjectList()
    this.subjectChange()
    // this.getTagsList()
    this.getCreatorList()
    this.getQuestionList()
  },
  methods: {
    // 弹框预览
    async toDetail (item) {
      // 显示弹框
      this.dialogVisible = true
      try {
        const { data } = await preview({ id: item.id })
        // console.log(data)
        this.questionItem = data
      } catch (error) {
        console.log(error)
      }
    },
    // 获取城市列表
    // 选择城市的方法
    provinceChange () {
      // 获取地区赋值给本地
      this.citys = citys(this.query.province)
    },
    //  获取学科列表
    async getSubjectList () {
      try {
        const { data } = await subjectList()
        this.subjects = data
        // console.log(data)
      } catch (err) { }
    },
    //  根据学科改变获取目录列表
    async subjectChange (val) {
      try {
        //  学科改变后  清空原来选择的标签和目录
        this.query.catalogID = null
        this.query.tags = null
        const { data } = await directorysList({ subjectID: val })
        // console.log(this.subjectID)
        // console.log(data)
        this.directory = data
        this.tagsList = []
      } catch (err) {
        console.log(err)
      }
    },
    // 获取标签
    async getTagsList () {
      const { data } = await tagsList({ subjectID: this.query.subjectID })
      this.tagsList = data.items
      // console.log(data)
    },
    //  目录选择框发生变化后触发
    directoryChange () {
      this.getTagsList()
    },
    //  获取录入人
    //  获取录入人
    async getCreatorList () {
      try {
        const { data } = await userList({
          page: 1,
          pagesize: 50,
          keyword: this.query.keyword
        })
        this.userList = data.list
      } catch (err) { }
    },
    //  清除
    clearAll () {
      // key为属性 query[key]为属性值
      for (const key in this.query) {
        if (key === 'page' || key === 'pagesize') {
          continue
        }
        this.query[key] = null
      }
      this.tagsList = this.directory = []
      this.getSubjectList()
      // 点击清除后重新获取列表数据
      this.getQuestionList()
    },
    // 也可以使用重置表单的方法但是必须要有prop这个参数
    // clearAll () {
    //   this.$refs.query.resetFields()
    //   // 有bug不能清除province
    // },
    // 获取基础题库列表加搜索 把query所有字段传过去
    async getQuestionList () {
      try {
        const { data } = await questionList(this.query)
        // console.log(data)
        this.counts = data.counts
        this.questionList = data.items
      } catch (error) {

      }
    },
    // 分页器
    handleSizeChange (val) {
      this.query.pagesize = val
      // 重新获取题库
      this.getQuestionList()
    },
    handleCurrentChange (val) {
      this.query.page = val
      this.getQuestionList()
    },
    // 跳转编辑页面
    toEdit (id) {
      this.$router.push({
        path: 'new',
        query: {
          id
        }
      })
    },
    // 删除功能
    toDelete (item) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'

      }).then(async () => {
        await remove(item)
        // 删除成功后清新获取列表
        await this.getQuestionList()
        // 删除后重新获取数据
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 加入精选功能
    toPreview (row) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'

      }).then(async () => {
        await choiceAdd({
          id: row.id,
          choiceState: 1
        })
        // 加入成功后清新获取列表
        this.getQuestionList()
        this.$message({
          type: 'success',
          message: '加入成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消加入'
        })
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  .clearfix {
    display: flex;
    justify-content: end;
    margin-bottom: 10px;
  }

  .city-1 {
    width: 45%;
    margin-right: 5%;
  }
  .city-2 {
    width: 50%;
  }
  .el-input__inner {
    width: 100%;
  }
  ::v-deep.el-alert {
    margin-bottom: 15px;
  }
  .el-alert {
    margin-bottom: 15px;
  }
  .el-pagination {
    display: flex;
    justify-content: end;
    margin-top: 20px;
  }
  ::v-deep.el-pagination__jump {
    margin-left: 0;
  }
}
</style>
